<template>
  <!-- overview-社交-外出情况 -->
  <div class="leaveDiv">
    <el-row :gutter="20">
      <el-col :span="12">
        <!-- 各组主动回答问题次数表格及饼状图 -->
        <el-card class="chart-card">
          <div slot="header" class="clearfix">
            <span>外出情况</span>
          </div>
          <div class="chart-container">
            <div class="chart" ref="answerPieChart"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <!-- 各组竞赛情况表格 -->
        <el-card class="chart-card">
          <div slot="header" class="clearfix">
            <span>请假人数</span>
          </div>
          <div class="chart-container">
            <el-table :data="[
              { group: '1组', count: leave1Count },
              { group: '2组', count: leave2Count },
              { group: '3组', count: leave3Count },
              { group: '全队', count: totalLeaveCount }
            ]"
              border
              style="width: 100%;"
              :header-cell-style="{
                background: '#0f1325',
                color: '#68d8fe',
                fontWeight: 'bold',
                fontSize: '16px',
                borderColor: '#68d8fe'
              }"
              :cell-style="{
                background: 'rgba(19,25,47,0.8)',
                color: '#d3d6dd',
                borderColor: '#68d8fe'
              }"
              class="custom-leave-table"
            >
              <el-table-column prop="group" label="组别" align="center"></el-table-column>
              <el-table-column prop="count" label="请假人数" align="center"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from "echarts";

export default {
  name: "Leave",
  data() {
    return {
      leaveType: "leave",
      leaveTypes: [
        { label: "事假", value: "leave" },
        { label: "病假", value: "sickLeave" },
        { label: "婚假", value: "marriageLeave" },
        { label: "产假", value: "maternityLeave" },
        { label: "丧假", value: "deathLeave" },
      ],
      // 新增请假人数统计
      leave1Count: 0,
      leave2Count: 0,
      leave3Count: 0,
      totalLeaveCount: 0,
      totalStudents: 233,
    };
  },
  mounted() {
    // this.initAnswerPieChart();
    // this.initLibraryBarChart();
    this.fetchScoreData();
  },
  methods: {
    // 获取成绩数据
    async fetchScoreData() {
      try {
        // 使用封装的API接口
        const res = await this.$displayapi.getOutCount();
        if (!res || (res.code !== '200' && res.code !== 200) || !res.data) {
          throw new Error("API返回数据格式不正确");
        }
        const data = res.data;
        const totalStudents = 233; // 固定全队总人数
        // 统计各组外出人数
        let grade1Count = 0, grade2Count = 0, grade3Count = 0;
        let leave1 = 0, leave2 = 0, leave3 = 0;
        const outList = Array.isArray(data.outDTOList) ? data.outDTOList : [];
        outList.forEach(item => {
          const count = parseInt(item.groupCount) || 0;
          switch(item.groupName) {
            case '1':
              grade1Count = count;
              leave1 = count;
              break;
            case '2':
              grade2Count = count;
              leave2 = count;
              break;
            case '3':
              grade3Count = count;
              leave3 = count;
              break;
          }
        });
        // 计算在校人数
        const inSchoolCount = totalStudents - (grade1Count + grade2Count + grade3Count);
        // 格式化为饼图数据
        this.scoreData = [
          { value: inSchoolCount, name: "全队在位人数" },
          { value: grade1Count, name: "1 组外出人数" },
          { value: grade2Count, name: "2 组外出人数" },
          { value: grade3Count, name: "3 组外出人数" },
        ];
        // 请假人数统计赋值
        this.leave1Count = leave1;
        this.leave2Count = leave2;
        this.leave3Count = leave3;
        this.totalLeaveCount = leave1 + leave2 + leave3;
        // 更新饼图
        this.initAnswerPieChart();
      } catch (error) {
        console.error("加载外出情况数据失败:", error);
        this.$message.error("加载外出情况数据失败，请检查API连接");
        // 使用空数组作为回退
        this.scoreData = [
          { value: 0, name: "全队在位人数" },
          { value: 0, name: "1 组外出人数" },
          { value: 0, name: "2 组外出人数" },
          { value: 0, name: "3 组外出人数" },
        ];
        this.leave1Count = 0;
        this.leave2Count = 0;
        this.leave3Count = 0;
        this.totalLeaveCount = 0;
        this.initAnswerPieChart();
      }
    },
    // 初始化回答问题饼图
    initAnswerPieChart() {
      const chartDom = this.$refs.answerPieChart;
      const myChart = echarts.init(chartDom);

      const option = {
        title: {
          left: "center",
          textStyle: {
            color: "#68d8fe",
            fontWeight: "bold",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          left: "center",
          bottom: "5%",
          textStyle: {
            color: "#68d8fe",
            fontWeight: "bold",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "70%",
            center: ["50%", "40%"],
            data: this.scoreData || [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            // 配置标签和引导线
            label: {
              show: false, // 保留标签文字
            },
            labelLine: {
              show: false, // 隐藏引导线
            },
          },
        ],
      };

      myChart.setOption(option);

      // 响应窗口大小变化
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    
  },
};
</script>
<style lang="scss" scoped>
.leaveDiv {
  width: 100%;
  height: 100%;
  //background-color: #fff;
  .clearfix {
    font-size: 22px;
    font-weight: bold;
    color: #68d8fe;
  }
  .chart-container {
    display: flex;
    width: 100%;
    flex-direction: column;
  }
  .chart {
    height: 300px;
  }
  .chart-card {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    background-color: rgba(104, 216, 254, 0.1) !important;
    border: 1px solid rgba(104, 216, 254, 0.5) !important;
    border-radius: 8px;
  }

  .chart-card >>> .el-card__header {
    background-color: rgba(104, 216, 254, 0.2);
    border-bottom: 1px solid rgba(104, 216, 254, 0.5);
    color: #68d8fe;
    font-weight: bold;
  }

  .chart-card >>> .el-card__body {
    background-color: transparent;
  }
}
.custom-leave-table {
  background: transparent;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(104,216,254,0.08);
}
.custom-leave-table ::v-deep .el-table__body tr {
  background: transparent;
}
.custom-leave-table ::v-deep .el-table__row td {
  color: #d3d6dd;
}
.custom-leave-table ::v-deep .el-table__header th {
  background: #0f1325;
  color: #68d8fe;
}
</style>
